<template>
  <div :class="titleState? 'banner': 'banner titleHide'">
    <div class='back'></div>
    <div class='title' >{{titleState? title :''}}</div>
    <div class="meBanner" v-if='!titleState'></div>
  </div>
</template>

<script>
  import {mapGetters, mapActions} from 'Vuex'

  export default{
    props: {
      title: {
        type: String,
        default: '超盟娃娃机'
      }
    },
    methods: {},
    computed: {
      ...mapGetters([
        'titleState'
      ])
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/scss" lang="scss" scoped>
  .banner {
    width: 100%;
    height: 44px;
    position: relative;
    font-size: 18px;
    background-color: #fff;
    &.titleHide {
      height: auto;
      background-color: #ffd726;
    }
    .back {
      position: absolute;
      left: 10px;
      top: 10px;
      width: 32px;
      height: 32px;
      background: url("../../assets/images/icon_go.png") no-repeat center;
      -webkit-background-size: 100%;
      background-size: 100%;
    }
    .title {
      width: 100%;
      height: 44px;
      text-align: center;
      line-height: 44px;
    }
    .meBanner {
      width: 100%;
      height: 125px;
      background: url("../../assets/images/user.png") no-repeat center;
      -webkit-background-size: cover;
      background-size: cover;
      margin-top: -1px;
    }
  }

</style>
